import React from 'react';
import { useState, useEffect } from 'react';
import "./login.scss";
import { getCaptchaImage,login } from '../../api/api';

import { Form, Input, Button, Checkbox, Radio,message } from 'antd';

import { UserOutlined } from '@ant-design/icons';

const layout = {
    wrapperCol: { span: 24 },
};
const tailLayout = {
    wrapperCol: { span: 24 },
};

const Login = () => {
    //用来控制是否执行重新获取验证码
    const [num, setNum] = useState(0);
    //设置一个验证码的state
    const [captchImage, setCaptch] = useState("");
    //设置uuid的state
    const [uuid,setUuid] = useState("");
    //异步获取验证码
    useEffect(() => {
        async function getCaptchs() {
            //获取验证码字符串
            const result = await getCaptchaImage();
            //设置验证码
            setCaptch(result.data.img);
            //设置uuid
            setUuid(result.data.uuid);
        }
        getCaptchs();
    }, [num]);

    //设置身份单选状态的state
    const [value, setValue] = React.useState(1);

    const [key,setKey] = React.useState('student');
    //身份单选状态的事件
    const onChange = async e => {
        await setValue(e.target.value);
        if(value === '1'){
            setKey('student');
        }else{
            setKey('teacher');
        }
    };
    //验证通过
    const onFinish = async (values) => {
        key === 'student'? window.sessionStorage.setItem("status","student"):window.sessionStorage.setItem("status","teacher");
           
        let {data} = await login({...values,key,uuid});
        //判断请求的状态
        if(data.code === 500){
            //全局提示
            message.error(data.msg);
        }else if(data.code === 200){
            //将用户名编码后存入cookie
            window.sessionStorage.setItem("username",window.encodeURI(values.username));
            //将token存入cookie
            window.sessionStorage.setItem("token",data.token);
            //调转主页
            window.location.href = "/home";
        }
    };
    //验证不通过
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div id="login">
            <div className="content">
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <h2>八维生产性实训平台</h2>
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="用户名" />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password prefix={<UserOutlined />} placeholder="密码" />
                    </Form.Item>

                    <div className="captch">
                        <Form.Item
                            name="code"
                            rules={[{ required: true, message: '请输入验证码!' }]}
                        >
                            <Input placeholder="验证码" />
                        </Form.Item>
                        <img onClick={() => setNum(num + 1)} src={`data:image/gif;base64,${captchImage}`} alt="" />
                    </div>

                    <Form.Item>
                        <Checkbox defaultChecked={true}>记住密码</Checkbox>
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>学生</Radio>
                            <Radio value={2}>老师</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
};

export default Login;